<link rel="stylesheet" href="/css/afterLoginPage.css">
<link rel="stylesheet" href="/css/follows.css">
<div class="main layui-clear">
	<div class="fly-main layui-clear">
		<div class="wrap clearfix">
			<div class="layui-bar">
		    	<div class="layui-breadcrumbs">
		    		<a class="home" href="/"></a>
					<i class="layui-icon">&#xe602;</i>
			  		<a href="/user/follows/list/${user.id!''}.html">已关注</a>
			  		<i class="layui-icon">&#xe602;</i>
			  		<a href="/user/follows/list/${user.id!''}.html">我的关注</a>
		    	</div>
		    </div>
		    <#include "/apps/user/userTopInformation.html">
			<div class="home-left">
				<#include "/apps/user/userinfo.html">
			</div>
			<div class="home-right" id="commenttopic">
				<div class="mobile-search-user pc-display-none">
			    	<input id="keyMobile" placeholder="查找新好友" class="search-input"><button class="search-button" onclick="searchUser()">查找</button>
			    	<div class="search-list">
			    	</div>
			    	<div style="text-align: center" class="front-desk layui-hide">
			    	 <div class="laypage-main" id="topicpageSearchMobile"></div>
			    	 <i class="close-search fa fa-close" onclick="hideSearch()"></i>
			    	 </div>
				</div>
				<div class="content" style="padding-top: 10px;">
					<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
					  <ul class="layui-tab-title">
							<li class="layui-this">我的关注</li>
							<li>查找</li>
						</ul>
					  <div class="layui-tab-content" style="height: 100px;">
					    <div class="layui-tab-item layui-show">
					    	<#if fansList?? && fansList.content??>
					    	<#list fansList.content as list>
					    	<div class="fans-list">
					    		<div class="content-top">
				    			<a href="/user/otherUser/${list.id}.html" target="_blank">
				    				<img class="user-photo" alt="" src="/${list.fileurl!''}" onerror="this.src='/images/user/default.jpg';this.onerror=null">
			    			    </a>
					    		<div class="title">
						    		<span title="${list.username!''}"><a href="/user/otherUser/${list.id}.html" target="_blank" >${list.username!''}</a></span><br>
						    		<span>lv.${list.grade.grade!''} ${list.grade.groups!''}</span>
					    		</div>
				    			<button id="button${list.id!''}" onclick="unfans('${list.id!''}','list')">取消关注</button>
					    		</div>
					    		<div class="content-bottom">
					    			<p class="mobile-display-none">${list.memo!'暂无数据'}</p>
					    			<p>
						    			<span>帖子：${list.topicCount!''}</span>
						    			<span>粉丝：${list.fans!''}</span>
						    			<span>案例：${list.microcaseCount!''}</span>
					    			</p>
					    		</div>
					    	</div>
							</#list>
							<#else>
							<div>
						    	<i style="font-size:14px;">没有任何关注</i>
					    	</div>
							</#if>
							<div style="text-align: center" class="front-desk">
						        <div class="laypage-main" id="topicpages"></div>
						    </div>
						</div>
					    <div class="layui-tab-item mobile-display-none">
					    	<input id="key" placeholder="请输入用户名" class="search-input"><button class="search-button" onclick="searchUser()">查找</button>
					    	<label class="search-label">搜索结果</label>
					    	<div class="search-list">
					    	</div>
					    	<div style="text-align: center" class="front-desk">
					    	 <div class="laypage-main" id="topicpageSearch"></div>
					    	 </div>
						</div>
					  </div>
					</div> 
				</div>
			</div>
		</div>
	</div>
</div>
<script>
var element, laypage ;
layui.use(['element' , 'laypage'], function(){
	  element = layui.element() ;
	  laypage = layui.laypage;
	  laypage({
		    cont: 'topicpages'
		    ,first:'首页'
		    ,last:'末页'
		    ,pages: ${fansList.totalPages!'0'}
		    ,curr:${fansList.number+1}
		    ,skin: '#32c24d'
		    ,jump:function(obj, first){
		    	var curr = obj.curr;
		    	if(!first){
		    		location.href = '/user/follows/list/${curruser.id!''}.html?p='+curr+"<#if RequestParameters['q']?? && RequestParameters['q'] != ''>&q=${RequestParameters['q']}</#if>";
		    	}
		    }
	});
});
	function fans(id,search){
		$.ajax({
	        type: "POST",
	        url: "/user/fans/"+id,
	        data: {},
	        success: function(data){
	        	if(data == "success"){
		        		$(".buttonSearch"+id).text("取消关注");
		        		$(".buttonSearch"+id).removeClass("fans-button");
		        		$(".buttonSearch"+id).attr("onclick","unfans('"+id+"')");
		        		$("#button"+id).text("取消关注");
		        		$("#button"+id).removeClass("fans-button");
		        		$("#button"+id).attr("onclick","unfans('"+id+"')");
	        		layer.msg('添加关注成功', {icon: 1});
	        	}else{
	        		layer.msg('添加关注失败', {icon: 2});
	        	}
	        }
	    });
	}
	function unfans(id,search){
		$.ajax({
	        type: "POST",
	        url: "/user/unfans/"+id,
	        data: {},
	        success: function(data){
	        	if(data == "success"){
	        			$(".buttonSearch"+id).text("添加关注");
		        		$(".buttonSearch"+id).addClass("fans-button");
		        		$(".buttonSearch"+id).attr("onclick","fans('"+id+"')");
		        		$("#button"+id).text("添加关注");
		        		$("#button"+id).addClass("fans-button");
		        		$("#button"+id).attr("onclick","fans('"+id+"')");
	        		layer.msg('取消关注成功', {icon: 1});
	        	}else{
	        		layer.msg('取消关注失败', {icon: 2});
	        	}
	        }
	    });
	}
	
	function searchUser(page){
		if(mobileTopicSign=="pc"){
    		var searchButton = 'topicpageSearch';
    		var pageNumber = 21;
    		var key = $("#key").val();
    	}else{
    		var searchButton = 'topicpageSearchMobile';
    		var pageNumber = 5;
    		$(".content").addClass("layui-hide");
    		$(".mobile-search-user .front-desk").removeClass("layui-hide");
    		var key = $("#keyMobile").val();
    	}
		$.ajax({
	        type: "POST",
	        url: "/user/queryByName?p="+page+"&ps="+pageNumber,
	        data: {userName:key},
	        success: function(page){
	        	var data = page.content;
	        	$(".search-list").html("");
	        	if(data.length > 0){
	        		$.each(data,function(index,item){
		        		if(item.fansIs == "Yes"){
		        			var button = '<button id="buttonSearch'+item.id+'" class="buttonSearch'+item.id+'" onclick="unfans(\''+item.id+'\',\'search\')">取消关注</button>';
		        		}else{
		        			var button = '<button class="fans-button buttonSearch'+item.id+'" id="buttonSearch'+item.id+'" onclick="fans(\''+item.id+'\',\'search\')">添加关注</button>';
		        		}
		        		var html = '<div class="user-list">'+
							    		'<div class="content-top">'+
							    		'<img class="user-photo" alt="" src="/'+item.fileurl+'" onerror="this.src=\'/images/user/default.jpg\';this.onerror=null">'+
							    		'<div class="title">'+
								    		'<span>'+item.username+'</span><br>'+
								    		'<span>lv.'+item.grade.grade+' '+item.grade.groups+'</span>'+
							    		'</div>'+
							    		button +
							    		'</div>'+
							    	'</div>';
							$(".search-list").append(html);
		        	})
	        	}else{
	        		$(".search-list").append("暂无数据");
	        	}
	        	laypage({
	    		    cont: searchButton
	    		    ,first:'首页'
	    		    ,last:'末页'
	    		    ,pages: page.totalPages
	    		    ,curr:(page.number+1)
	    		    ,jump:function(obj, first){
	    		    	var curr = obj.curr;
	    		    	if(!first){
	    		    		searchUser(curr)
	    		    	}
	    		    }
	    		});
	        }
	    });
	}
	
	function hideSearch(){
		$('.mobile-search-user .front-desk').addClass('layui-hide');
		$(".search-list").html("");
		$(".content").removeClass("layui-hide");
	}
</script>
